<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
@keyframes test {
  from { --x: green; }
  to { --x: lime; }
}
#parentA, #parentB {
  --x: red;
}
#targetA, #targetB {
  background-color: var(--x);
}
#parentA {
  animation: test 10s -2s;
}
#parentB {
  animation: test 10s -8s;
}
</style>
<div id="parentA">
  <div id="targetA"></div>
</div>
<div id="parentB">
  <div id="targetB"></div>
</div>
<script>
test(() => {
  assert_equals(getComputedStyle(targetA).getPropertyValue('--x'), ' green');
  assert_equals(getComputedStyle(targetB).getPropertyValue('--x'), ' lime');
}, 'CSS Animations on custom properties should get inherited');

test(() => {
  assert_equals(getComputedStyle(targetA).backgroundColor, 'rgb(0, 128, 0)');
  assert_equals(getComputedStyle(targetB).backgroundColor, 'rgb(0, 255, 0)');
}, 'CSS Animations on custom properties that get inherited should be reflected in var() references');
</script>
